import React, { PureComponent } from 'react'
import { Tabs } from 'antd'
import { connect } from '@umijs/max'
import { General, History } from './page-components'
import styles from './index.less'

const { TabPane } = Tabs

@connect(({ offlineOperation }) => ({ ...offlineOperation }))
class Operation extends PureComponent {
  state = {
    operateSta: this.props?.operationTabKey || '1',
  }

  componentWillUnmount() {
    this.props.dispatch({
      type: 'offlineOperation/saveFilterValue',
      params: {
        operationTabKey: '1',
        filteredDefaultValue: [],
      },
    })
  }

  onTabsChange = (val) => {
    this.setState({
      operateSta: val,
    })
  }

  clearFilterValue = () => {
    this.props.dispatch({
      type: 'offlineOperation/saveFilterValue',
      params: {
        filteredDefaultValue: [],
        searchValue: '',
      },
    })
  }

  render() {
    const { operateSta } = this.state
    return (
      <div className={`${styles.operation} ${operateSta !== '1' ? styles.add_bg : ''} ${styles.page_content_tabs_height}`}>
        <Tabs
          destroyInactiveTabPane
          animated
          activeKey={operateSta}
          type="card"
          onChange={(val) => {
            this.onTabsChange(val)
            this.clearFilterValue()
          }}
          className={styles.page_content_tabs}
        >
          <TabPane tab="运维概览" key="1">
            <General onTabsChange={this.onTabsChange} />
          </TabPane>
          <TabPane tab="任务运行记录" key="3">
            <History />
          </TabPane>
        </Tabs>
      </div>
    )
  }
}

export default Operation
